<template>
  <div class="history-container">
    <van-cell title="搜索历史">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon v-if="isShow">
        <span style="margin-right:5px" @click="delAll">全部删除</span>
        <span @click="isShow=!isShow">完成</span>
      </template>
      <span @click="isShow=!isShow" v-else>
        <van-icon name="delete" class="delete=icon" />
      </span>
    </van-cell>
    <van-cell v-for="(item, index) in historyVal" :key="index" @click="delhistory(index)">
      <div slot="title" @click="isShow?'':$emit('search',item)">{{item}}</div>
      <!-- @click="$emit('search',item)" -->
      <template #right-icon v-if="isShow">
        <van-icon name="close" class="close-icon" />
      </template>
    </van-cell>
  </div>
</template>
<script>
import { SET_TOKEN, GET_TOKEN } from "@/utils/storage.js";
export default {
  props: ["historyVal"],
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    // 单个删除
    delhistory(index) {
      //   console.log(index);
      this.historyVal.splice(index, 1);
      SET_TOKEN("history", this.historyVal);
    },
    // 全部删除
    delAll() {
      this.$emit("delALL");
      SET_TOKEN("history", this.historyVal);
    },
  },
};
</script>
<style lang='less' scoped>
.history-container {
  padding-top: 105px;
}
</style>